<template>
  <view class="user_info_container flex_left_right" @click="loginFun">
    <view class="user_info_image flex_left">
      <image :src="userInfo.avatarUrl ? userInfo.avatarUrl : 'https://wap.jiuyulingjing.com.cn/static/missing-face.png'" style="width: 100%; height: 100%"  @click="settingUserInfoFun"/>
    </view>

    <view class="flex_right">
      <view class="wrapper" v-if="userInfo.userId">
        <view style="width: 100%">
          <view class="ellipsis user_name" @click="settingUserInfoFun"> {{ userInfo.nickName || '微信用户' }}</view>
          <view class="user_info_oper" v-if="userInfo.phoneNumber">
            <text class="user_oper_row">联系方式：{{ userInfo.phoneNumber }}</text>
          </view>
        </view>
      </view>
      <view class="login-user-text wrapper" v-else style="justify-content: left"> 登录 </view>
    </view>
  </view>
</template>

<script setup lang="ts" name="userInfo">
  import { useNavigatePage } from '@/hooks/navigateTo'
  import useUserInfoStore from '@/store/userInfo'
  import { computed } from 'vue'
  const navigatePage = useNavigatePage()
  const userInfoStore = useUserInfoStore()
  const userInfo = computed(() => userInfoStore.getUserInfo)
  const loginFun = () => {
    if (!userInfo.value.userId) {
      navigatePage.navigateTo('/pages/login/index')
    }
  }
  const settingUserInfoFun = () => {
    // if (!userInfo.value.nickName) {
      navigatePage.navigateTo('/pages/userInfo/index')
    // }
  }
</script>

<style scoped lang="scss">
  .login-user-text {
    font-size: 34rpx;
    color: #ffffff;
  }
  .user_info_container {
    background: #409eff;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 20rpx 20rpx 70rpx 20rpx;
    align-items: stretch;
    .user_info_image {
      width: 140rpx;
      height: 140rpx;
      margin-right: 30rpx;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      overflow: hidden;
    }
    .user_name {
      font-size: 34rpx;
      font-weight: 600;
      color: #ffffff;
    }
    .user_info_oper {
      margin-top: 10px;
      .user_oper_row {
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 0.5);
        text-align: center;
        margin-right: 10rpx;
        padding: 5rpx 10rpx;
        font-size: 30rpx;
      }
    }
    .oper_model {
      margin-top: 40rpx;
      .mode_row {
        text-align: center;
      }
      .oper_text {
        font-size: 28rpx;
      }
    }
  }
</style>
